<div class="flex-column d-flex align-items-stretch h-100 w-100 pb-2">
  <div class="drag-handler p-2" [ngClass]="{ 'widget-cursor': widget.draggable }">
    {{ 'status.services.updates' | translate }}
  </div>
  <div
    class="d-flex flex-wrap w-100 mt-1 justify-content-start gridster-item-content overflow-auto no-scrollbars align-items-start"
  >
    @if (serverInfo && serverInfo.homebridgeRunningInDocker) {
    <div class="hb-status-item d-flex flex-column mb-1" style="min-width: max(25%, 200px)">
      <div
        class="d-flex ps-3 py-1 align-items-center cursor-pointer"
        (click)="toggleDockerExpand()"
        style="cursor: pointer"
      >
        <div class="mb-0 d-flex align-items-center">
          @if (!dockerStatusDone) {
          <i class="fas fa-lg fa-cog fa-spin primary-text"></i>
          } @if (dockerStatusDone) { @if (dockerInfo.updateAvailable) {
          <i class="fas fa-lg fa-arrow-alt-circle-up orange-text"></i>
          } @if (!dockerInfo.updateAvailable) {
          <i class="fas fa-lg fa-check-circle green-text"></i>
          } }
        </div>
        <div class="align-self-center px-3">
          Docker-Homebridge
          <i class="fas fa-chevron-down ms-2" [ngClass]="{ 'fa-rotate-180': !widget.dockerExpanded }"></i>
          <br />
          @if (!dockerStatusDone) {
          <span class="grey-text small">{{ 'status.homebridge.checking' | translate }}</span>
          } @if (dockerStatusDone) {
          <span class="grey-text small">{{ dockerInfo.currentVersion }}</span>

          @if (dockerInfo.updateAvailable && isAdmin) { &middot;
          <a href="javascript:void(0)" (click)="dockerUpdateModal()" class="primary-text small">
            {{'plugins.button_update' | translate }}
          </a>
          } }
        </div>
      </div>
      @if (widget.dockerExpanded) {
      <div class="ps-5 pe-3 d-flex flex-wrap">
        <!-- Homebridge -->
        <div class="hb-status-item d-flex flex-row py-1" style="min-width: 200px; flex: 1 0 auto">
          <div class="d-flex ps-3 py-1">
            <div class="mb-0 d-flex align-items-center">
              @if (!homebridgePkg.installedVersion) {
              <i class="fas fa-lg fa-cog fa-spin primary-text"></i>
              } @if (homebridgePkg.installedVersion && !homebridgePkg.updateAvailable) {
              <i class="fas fa-lg fa-check-circle green-text"></i>
              } @if (homebridgePkg.installedVersion && homebridgePkg.updateAvailable) {
              <i class="fas fa-lg fa-arrow-alt-circle-up orange-text"></i>
              }
            </div>
            <div class="align-self-center px-3">
              @if (homebridgePkg.installedVersion) { @if (isAdmin) {
              <a
                href="javascript:void(0)"
                (click)="installAlternateVersion(homebridgePkg)"
                class="card-link card-link-title"
                >Homebridge</a
              >
              } @else { Homebridge } @if (isHbV2Loaded && !isRunningHbV2 && isAdmin) {
              <a
                href="javascript:void(0)"
                class="ms-1"
                (click)="readyForV2Modal()"
                ngbTooltip="Homebridge v2 Readiness"
                container="body"
                [openDelay]="150"
                triggers="hover"
                placement="top"
                aria-label="Homebridge v2 Readiness"
              >
                <i
                  class="fas fa-info-circle"
                  [ngClass]="{ 'green-text': isHbV2Ready, 'orange-text': !isHbV2Ready }"
                ></i>
              </a>
              } } @if (!homebridgePkg.installedVersion) {
              <span>Homebridge</span>
              }
              <br />
              @if (!homebridgePkg.installedVersion) {
              <span class="grey-text small">{{ 'status.homebridge.checking' | translate }}</span>
              } @if (homebridgePkg.installedVersion) {
              <span class="grey-text small">v{{ homebridgeVersion }}</span>
              @if (homebridgePkg.updateAvailable && isAdmin) { &middot;
              <a href="javascript:void(0)" (click)="updatePackage(homebridgePkg)" class="primary-text small">
                {{ 'plugins.button_update' | translate }}
              </a>
              } }
            </div>
          </div>
        </div>
        <!-- Homebridge UI -->
        <div class="hb-status-item d-flex flex-row py-1" style="min-width: 200px; flex: 1 0 auto">
          <div class="d-flex ps-3 py-1">
            <div class="mb-0 d-flex align-items-center">
              @if (!homebridgeUiPkg.installedVersion) {
              <i class="fas fa-lg fa-cog fa-spin primary-text"></i>
              } @if (homebridgeUiPkg.installedVersion && !homebridgeUiPkg.updateAvailable) {
              <i class="fas fa-lg fa-check-circle green-text"></i>
              } @if (homebridgeUiPkg.installedVersion && homebridgeUiPkg.updateAvailable) {
              <i class="fas fa-lg fa-arrow-alt-circle-up orange-text"></i>
              }
            </div>
            <div class="align-self-center px-3">
              @if (homebridgeUiPkg.installedVersion && isAdmin) {
              <a
                href="javascript:void(0)"
                (click)="installAlternateVersion(homebridgeUiPkg)"
                class="card-link card-link-title"
                >Homebridge UI</a
              >
              } @else {
              <span>Homebridge UI</span>
              }
              <br />
              @if (!homebridgeUiPkg.installedVersion) {
              <span class="grey-text small">{{ 'status.homebridge.checking' | translate }}</span>
              } @if (homebridgeUiPkg.installedVersion) {
              <span class="grey-text small">v{{ packageVersion }}</span>
              @if (homebridgeUiPkg.updateAvailable && isAdmin) { &middot;
              <a href="javascript:void(0)" (click)="updatePackage(homebridgeUiPkg)" class="primary-text small">
                {{ 'plugins.button_update' | translate }}
              </a>
              } }
            </div>
          </div>
        </div>
        <!-- Node.js -->
        <div class="hb-status-item d-flex flex-row py-1" style="min-width: 200px; flex: 1 0 auto">
          <div class="d-flex ps-3 py-1">
            <div class="mb-0 d-flex align-items-center">
              @if (!nodejsStatusDone) {
              <i class="fas fa-lg fa-cog fa-spin primary-text"></i>
              } @if (nodejsStatusDone) { @if (widget.hideNodeInfo) {
              <i class="fas fa-lg fa-circle green-text"></i>
              } @if (!widget.hideNodeInfo) { @if (nodejsInfo.updateAvailable) {
              <i class="fas fa-lg fa-arrow-alt-circle-up orange-text"></i>
              } @if (nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
              <i class="fas fa-lg fa-exclamation-circle orange-text"></i>
              } @if (!nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning) {
              <i class="fas fa-lg fa-check-circle green-text"></i>
              } } }
            </div>
            <div class="align-self-center px-3">
              <a
                href="javascript:void(0)"
                (click)="nodeVersionModal(serverInfo.nodeVersion)"
                class="card-link card-link-title"
                >Node.js</a
              >@if (widget.showNpmVersion && nodejsInfo.npmVersion) { &middot; npm }
              <br />
              @if (!nodejsStatusDone) {
              <span class="grey-text small">{{ 'status.homebridge.checking' | translate }}</span>
              } @if (nodejsStatusDone) {
              <span class="grey-text small"
                >{{ serverInfo.nodeVersion }}@if (widget.showNpmVersion && nodejsInfo.npmVersion) { &middot; {{
                nodejsInfo.npmVersion }} }</span
              >
              @if (!widget.hideNodeInfo) { @if (nodejsInfo.updateAvailable && isAdmin) { &middot;
              <a
                href="javascript:void(0)"
                (click)="nodeVersionModal(nodejsInfo.latestVersion)"
                class="primary-text small"
              >
                {{'plugins.button_update' | translate }}
              </a>
              } @if (nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) { &middot;
              <a
                href="javascript:void(0)"
                (click)="nodeVersionModal(serverInfo.nodeVersion)"
                class="primary-text small"
              >
                {{ 'status.widget.info.node_unsupp' | translate }}
              </a>
              } } }
            </div>
          </div>
        </div>
      </div>
      }
    </div>
    } @if (serverInfo && !serverInfo.homebridgeRunningInDocker) {
    <!-- Homebridge -->
    <div class="hb-status-item d-flex flex-row mb-1" style="min-width: max(25%, 225px)">
      <div class="d-flex ps-3 py-1">
        <div class="mb-0 d-flex align-items-center">
          @if (!homebridgePkg.installedVersion) {
          <i class="fas fa-lg fa-cog fa-spin primary-text"></i>
          } @if (homebridgePkg.installedVersion && !homebridgePkg.updateAvailable) {
          <i class="fas fa-lg fa-check-circle green-text"></i>
          } @if (homebridgePkg.installedVersion && homebridgePkg.updateAvailable) {
          <i class="fas fa-lg fa-arrow-alt-circle-up orange-text"></i>
          }
        </div>
        <div class="align-self-center px-3">
          @if (homebridgePkg.installedVersion) { @if (isAdmin) {
          <a
            href="javascript:void(0)"
            (click)="installAlternateVersion(homebridgePkg)"
            class="card-link card-link-title"
            >Homebridge</a
          >
          } @else { Homebridge } @if (isHbV2Loaded && !isRunningHbV2 && isAdmin) {
          <a
            href="javascript:void(0)"
            class="ms-1"
            (click)="readyForV2Modal()"
            ngbTooltip="Homebridge v2 Readiness"
            container="body"
            [openDelay]="150"
            triggers="hover"
            placement="top"
            aria-label="Homebridge v2 Readiness"
          >
            <i class="fas fa-info-circle" [ngClass]="{ 'green-text': isHbV2Ready, 'orange-text': !isHbV2Ready }"></i>
          </a>
          } } @if (!homebridgePkg.installedVersion) {
          <span>Homebridge</span>
          }
          <br />
          @if (!homebridgePkg.installedVersion) {
          <span class="grey-text small">{{ 'status.homebridge.checking' | translate }}</span>
          } @if (homebridgePkg.installedVersion) {
          <span class="grey-text small">v{{ homebridgeVersion }}</span> @if (homebridgePkg.updateAvailable && isAdmin) {
          &middot;
          <a href="javascript:void(0)" (click)="updatePackage(homebridgePkg)" class="primary-text small">
            {{ 'plugins.button_update' | translate }}
          </a>
          } }
        </div>
      </div>
    </div>
    <!-- Homebridge UI -->
    <div class="hb-status-item d-flex flex-row mb-1" style="min-width: max(25%, 225px)">
      <div class="d-flex ps-3 py-1">
        <div class="mb-0 d-flex align-items-center">
          @if (!homebridgeUiPkg.installedVersion) {
          <i class="fas fa-lg fa-cog fa-spin primary-text"></i>
          } @if (homebridgeUiPkg.installedVersion && !homebridgeUiPkg.updateAvailable) {
          <i class="fas fa-lg fa-check-circle green-text"></i>
          } @if (homebridgeUiPkg.installedVersion && homebridgeUiPkg.updateAvailable) {
          <i class="fas fa-lg fa-arrow-alt-circle-up orange-text"></i>
          }
        </div>
        <div class="align-self-center px-3">
          @if (homebridgeUiPkg.installedVersion && isAdmin) {
          <a
            href="javascript:void(0)"
            (click)="installAlternateVersion(homebridgeUiPkg)"
            class="card-link card-link-title"
            >Homebridge UI</a
          >
          } @else {
          <span>Homebridge UI</span>
          }
          <br />
          @if (!homebridgeUiPkg.installedVersion) {
          <span class="grey-text small">{{ 'status.homebridge.checking' | translate }}</span>
          } @if (homebridgeUiPkg.installedVersion) {
          <span class="grey-text small">v{{ packageVersion }}</span>
          @if (homebridgeUiPkg.updateAvailable && isAdmin) { &middot;
          <a href="javascript:void(0)" (click)="updatePackage(homebridgeUiPkg)" class="primary-text small">
            {{ 'plugins.button_update' | translate }}
          </a>
          } }
        </div>
      </div>
    </div>
    }
    <!-- Plugins -->
    <div class="hb-status-item d-flex flex-row mb-1" style="min-width: max(25%, 225px)">
      <div class="d-flex ps-3 py-1">
        <div class="mb-0 d-flex align-items-center">
          @if (!homebridgePluginStatusDone) {
          <i class="fas fa-lg fa-cog fa-spin primary-text"></i>
          } @if (homebridgePluginStatusDone && homebridgePluginStatus.length) {
          <i class="fas fa-lg fa-arrow-alt-circle-up orange-text"></i>
          } @if (homebridgePluginStatusDone && !homebridgePluginStatus.length) {
          <i class="fas fa-lg fa-check-circle green-text"></i>
          }
        </div>
        <div class="align-self-center px-3">
          <a href="javascript:void(0)" routerLink="/plugins" class="card-link card-link-title">
            {{ 'menu.label_plugins' | translate }}
          </a>
          <br />
          @if (!homebridgePluginStatusDone) {
          <span class="grey-text small">{{ 'status.homebridge.checking' | translate }}</span>
          } @if (homebridgePluginStatusDone) { @if (!homebridgePluginStatus.length) {
          <span class="grey-text small">{{ 'status.homebridge.up_to_date' | translate }}</span>
          } @if (homebridgePluginStatus.length) { @if (isAdmin) {
          <a routerLink="/plugins" class="primary-text small">{{ 'plugins.button_update' | translate }}</a>
          } @else {
          <span class="grey-text small">{{ 'plugins.button_update' | translate }}</span>
          } } }
        </div>
      </div>
    </div>
    @if (serverInfo && !serverInfo.homebridgeRunningInDocker) {
    <!-- Node.js -->
    <div class="hb-status-item d-flex flex-row mb-1" style="min-width: max(25%, 225px)">
      <div class="d-flex ps-3 py-1">
        <div class="mb-0 d-flex align-items-center">
          @if (!nodejsStatusDone) {
          <i class="fas fa-lg fa-cog fa-spin primary-text"></i>
          } @if (nodejsStatusDone) { @if (widget.hideNodeInfo) {
          <i class="fas fa-lg fa-circle green-text"></i>
          } @if (!widget.hideNodeInfo) { @if (nodejsInfo.updateAvailable) {
          <i class="fas fa-lg fa-arrow-alt-circle-up orange-text"></i>
          } @if (nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
          <i class="fas fa-lg fa-exclamation-circle orange-text"></i>
          } @if (!nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning) {
          <i class="fas fa-lg fa-check-circle green-text"></i>
          } } }
        </div>
        <div class="align-self-center px-3">
          <a
            href="javascript:void(0)"
            (click)="nodeVersionModal(serverInfo.nodeVersion)"
            class="card-link card-link-title"
            >Node.js</a
          >@if (widget.showNpmVersion && nodejsInfo.npmVersion) { &middot; npm }
          <br />
          @if (!nodejsStatusDone) {
          <span class="grey-text small">{{ 'status.homebridge.checking' | translate }}</span>
          } @if (nodejsStatusDone) {
          <span class="grey-text small"
            >{{ serverInfo.nodeVersion }}@if (widget.showNpmVersion && nodejsInfo.npmVersion) { &middot; {{
            nodejsInfo.npmVersion }} }</span
          >
          @if (!widget.hideNodeInfo) { @if (nodejsInfo.updateAvailable && isAdmin) { &middot;
          <a href="javascript:void(0)" (click)="nodeVersionModal(nodejsInfo.latestVersion)" class="primary-text small">
            {{'plugins.button_update' | translate }}
          </a>
          } @if (nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) { &middot;
          <a href="javascript:void(0)" (click)="nodeVersionModal(serverInfo.nodeVersion)" class="primary-text small">
            {{ 'status.widget.info.node_unsupp' | translate }}
          </a>
          } } }
        </div>
      </div>
    </div>
    }
  </div>
</div>
